<template>
  <view class="hd">
    <image src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/nav-yiyu.png" mode="" />
  </view>
  <!-- 头部标题 -->
  <view class="hd_title">
    <view class="hd_txt">海淀上庄第一人民医院</view>
  </view>

  <!-- 首页九宫格 -->
  <view class="hopital_nav">
    <view class="nav_item" v-for="(item, index) in hospital_vaccine" :key="index" @click="goYuYue(index)">
      <image :src="item.image" mode="" />
      <text>{{ item.title }}</text>
    </view>
  </view>

  <!-- 预约挂号和体验 -->
  <view class="hospital_yuyueGh_tj mt16">
    <view class="yuyueGh_tj_item" v-for="(item, index) in hospital_reserve" :key="index">
      <view class="yuyueGh_tj_tilte">
        <view class="main_title fz20">{{ item.title }}</view>
        <view class="main_sub_title">{{ item.describe }}</view>
      </view>
      <view class="yuyueGh_tj_pic">
        <image :src="item.image" mode="" />
      </view>
    </view>
  </view>

  <!-- 热门挂号 -->
  <view class="hot_GuaHao mt16 pl10 pr10">
    <!-- 标题 -->
    <view class="hospital_hd_title">
      <view class="hd_main_title">热门挂号</view>
      <view class="hd_more">
        <text>查看更多</text>
        <image src="/static/other/gengduo.svg" mode="" />
      </view>
    </view>
    <!-- 挂号科室网格 -->
    <view class="hospital_keshi_box">
      <view :style="`background:${item.background}`" class="hospital_keshi_item" v-for="(item, index) in hospital_popular"
        :key="index">
        <text>{{ item.title }}</text>
        <image :src="item.image" mode="" />
      </view>
    </view>
  </view>
  <!-- 健康自测 -->
  <view class="hospital_self_test mt16">
    <!-- 标题 -->
    <view class="hospital_hd_title pl10">
      <view class="hd_main_title">健康自测</view>
    </view>
    <!-- 健康自测项盒子 -->
    <view class="self_test_box">
      <view class="hospital_self_test_item" @click="jianKangSelt(index, item.name)"
        v-for="(item, index) in hospital_self_test" :key="index">
        <view class="self_test_title">{{ item.name }}</view>
        <view class="self_test_sub_title">{{ item.describe }}</view>
        <view class="self_test_total">
          <text>{{ item.number_of_people }}人测过</text>
          <text>{{ item.question }}题/{{ item.minute }}分钟</text>
        </view>
        <image :src="item.image" mode="" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getHomeApi } from '@/http/api'
import type { vaccineType, reserveType, popularType, self_testType } from '@/dataType/data'


//头部
const hd_top = ref('')
const hd_height = ref('')

//定义首页导航
const hospital_vaccine = ref<vaccineType[]>([]);
//预约挂号体检
const hospital_reserve = ref<reserveType[]>([])
//热门挂号
const hospital_popular = ref<popularType[]>([])
//健康自测
const hospital_self_test = ref<self_testType[]>([])

onMounted(() => {
  getHomeFn()
  getMenuInfo()
})


//点击九宫格预约对应服务
const goYuYue = (i: number) => {
  console.log(i)
  switch (i) {
    case 0:
      uni.navigateTo({
        url: '/pages/xinguan/index'
      });
      break;
    case 1: uni.navigateTo({
      url: '/pages/hpv/hpv_yuyue'
    });
      break;
    // case 2: xxx;
    case 3:
      uni.navigateTo({
        url: '/pages/tuwen/index'
      });
    //default:
  }
}
//获取首页数据
const getHomeFn = async () => {
  const res = await getHomeApi()
  console.log('获取首页数据：', res)
  hospital_vaccine.value = res.data.data[0].vaccine
  hospital_reserve.value = res.data.data[1].reserve
  hospital_popular.value = res.data.data[2].popular
  hospital_self_test.value = res.data.data[3].self_test
}

//获取胶囊按钮的位置信息
const getMenuInfo = () => {
  const menuInfo = uni.getStorageSync('menuInfo')
  console.log('menuInfo-首页:', menuInfo)
  hd_top.value = menuInfo.top + 'px';
  hd_height.value = menuInfo.height + 'px'
}

//健康自测答题跳转
const jianKangSelt = (index: number, title: string) => {
  console.log(index)
  console.log(title)
  uni.navigateTo({
    url: `/pages/question/index?type=00${index + 1}&title=${title}`
  })
}


</script>

<style lang="scss">
@import "@/assets/style/public.scss";

.hd {
  image {
    width: 100%;
    height: 550rpx;
  }
}

.hd_title {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: v-bind(hd_top);

  .hd_txt {
    color: #fff;
    padding-left: 30rpx;
    height: v-bind(hd_height);
    line-height: v-bind(hd_height);
  }
}

// 九宫格
.hopital_nav {
  display: flex;

  .nav_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}

//预约挂号和体验样式
.hospital_yuyueGh_tj {
  display: flex;
  justify-content: space-around;
  height: 200rpx;

  .yuyueGh_tj_item {
    position: relative;
    // flex: 1;
    width: calc(90% / 2);
    display: flex;
    color: #fff;

    image {
      width: 160rpx;
      height: 160rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    &:nth-of-type(1) {
      .main_title {
        color: #00f;
      }

      background: linear-gradient(to right, #dee3f8, #62a4fb);
    }

    &:nth-of-type(2) {
      .main_title {
        color: #c57606;
      }

      background: linear-gradient(to right, #fed9b6, #fdc474);
    }

  }
}

//标题样式
.hospital_hd_title {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .hd_more {
    display: flex;
    align-items: center;

    image {
      width: 50rpx;
      height: 50rpx;
    }
  }
}

// 热门挂号科室
.hospital_keshi_box {
  //开启网格布局
  display: grid;
  //指定网格列数，列宽：1fr表示占1份
  grid-template-columns: repeat(3, 1fr);
  //指定行高
  grid-auto-rows: 150rpx;
  //网格间距
  //  grid-row-gap: 20rpx;
  // grid-column-gap: 10rpx;
  grid-gap: 20rpx;

  .hospital_keshi_item {
    border-radius: 8rpx;
    // border: 1px solid #f00;
    display: flex;
    justify-content: space-around;
    align-items: center;

    image {
      width: 60rpx;
      height: 60rpx;
    }

    // &:nth-of-type(1) {
    //   grid-column-start: 1;
    //   grid-column-end: 3;
    // }
  }
}

// 健康自测样式
.self_test_box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 260rpx;

  .hospital_self_test_item {
    border: 1px solid #f00;
    position: relative;


    image {
      width: 190rpx;
      height: 160rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    &:nth-of-type(1) {
      grid-column-start: 1;
      grid-column-end: 3;

      .self_test_total {
        flex-direction: row;

        text {
          transform: translateY(0) !important;
          padding: 16rpx;

          &:nth-of-type(1)::after {
            display: inline-block;
            content: '/';
            transform: translateX(20rpx);
          }
        }
      }

      image {
        width: 240rpx;
        height: 210rpx;
      }
    }

    .self_test_total {
      display: flex;
      flex-direction: column;

      text:nth-of-type(1) {
        transform: translateY(80rpx);
      }

      text:nth-of-type(2) {
        transform: translateY(-30rpx);
      }
    }
  }
}
</style>
